/* @media screen and (min-width:0\0) */
@charset 'utf-8';
@import 'theme';
@import 'color';
@import 'model-beta';
@import 'common';

//@media all and (-webkit-min-device-pixel-ratio: 2) {
	/* TOP */
	html,body{
		width: 100%;
		height: 100%;
		font-size: 13px;
    	// transform: translate3d(0,0,0);
	}
	*{	
		margin: 0 auto;
		font-family: 'icomoon',"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",sans-serif!important;
	}
	a{
		color: $fontColor;
		text-decoration: none;
	}
	.blockwrap{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba($white,0.4);
		left: 0;
		top: 0;
		z-index: -1;
	}
	.top{
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		background-color: $themeColor;
		background: rgba($themeColor,0.85) !important;
		box-shadow: 0 0 5px 0 $black;
		.left{
			float: left;
			width: 30%;;
			.icon-tag{
				// font-family: "icomoon"!important;
				color: $fontColor;
				margin: 0 0.5rem;
			}
			.chat{
				width: 21px;
				height: 17px;
				position: relative;
				top: 3px;
			}
		}
		.right{
			width: auto;
			max-width: 50%;
			padding: 0 0.5rem;
			float: right;
			.icon-cart,.icon-user2,.icon-user{
				// font-family: "icomoon"!important;
				margin-right: 0.5rem;
			}
		}
	}
	
	._mainbox{
		position: relative;
		width: 100%;
		height: 115px;
		overflow: hidden;
		box-shadow: 0 1px 8px 0 rgba($gray,0.6);
		background-image: url('/images/theme1.jpg');
		.maininfo{
			position: absolute;
			box-shadow: 0 -1px 8px 0 rgba($gray,0.8);
			width: 94%;
			padding: 0.3rem 3%;
			bottom: 0;
			z-index: 101;
			background-color: rgba($white,0.6);
			.logo{
				line-height: 1.5rem;
				img{
					margin-right: 1rem;
					display: inline-block;
					vertical-align: middle;
				}
				.name{
					font-size: 18px;
				}
				.info{
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
	}
	.picwall{
		width: 100%;
		position: relative;
		overflow: hidden;
		z-index: 100;
		.carosule{
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			.pic-show{
				width: 100%;
				height: 100%;
				position: relative;
				.pic{
					height: 100%;
					position: relative;
					left: 0;
					img{
						min-width: 100%;
						max-width: 100%;
						height: 115px;
						box-shadow: 0 1px 8px 0 rgba($gray,0.6);
					}
				}
			}
		}
	}

	.nav{
		width: 100%;
		.storeinfo{
			width: 100%;
			height: auto;
			.storetitle{
				padding: 0.5rem 1.5%;
				font-size: 1.5rem;
				font-weight: bold;
			}
			.item{
				padding: 0.2rem 1.5%;
				@include newLine();
			}
		}
		.navbar{
			@include newLine();
			margin-top: 0.5rem;
			.nav-button{
				width: 47%;
				border-radius: 2px;
				background-color: $themeColor;
				display: inline-block;
				text-align: center;
				margin: 0.4rem 1.5%;
				padding: 0.5rem 0;
				box-shadow: 0 1px 3px 0 rgba($gray,0.6);
			}
		}
	}
	//goods in line
	.goods{
		padding: 0.5rem;
		.img{
			border: 1px solid $themeColor;
			margin-right: 0.5rem;
			display: inline-block;
			width: 20%;
			.goods-img{
				width: 100%;
			}
		}
		.goods-info{
			display: inline-block;
			height: 5rem;
			width: 76%;
			.item{
				color: $black;
				height: 20px;
				line-height: 20px;
				overflow: hidden;
				&.first{
					color: $silver;
					height: 40px;
					overflow: hidden;
					word-break: break-word;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				&.info{
					line-height: 20px;
				}
				.name{
					margin-right: 0.5rem;
					color: $blue;
				}
				.price{
					display: inline-block;
					width: 30%;
					color: $red;
					margin-right: 0.5rem;
				}
				.num{
					width: 15%;
					display: inline-block;
					margin-right: 0.5rem;
				}
				.sale{
					display: inline-block;
				}

			}
		}
	}

	.pagetitle{
		font-size: 1.4rem;
		padding: 0.7rem 1.5%;
	}
	.main-goods{
		width: 100%;
		@include newLine();
		h1{
			padding: 0.3rem 0.5rem;
		}
		.types{
			@include newLine();
			padding: 0 0.5rem;
			a{
				display: inline-block;
				padding: 0.5rem 1rem;
				background-color: $themeColor;
				border-radius: 2px;
				box-shadow: 0 1px 4px 0 rgba($gray,0.7);
				margin: 3px;
			}
		}
		
	}

	.store-int{
		width: 100%;
		margin-top: 0.5rem;
		.item{
			width: 90%;
			padding: 1.5rem 1.5%;
			background-color: rgba($white,0.6);
			box-shadow: 0 1px 8px 0 rgba($gray,0.8);
			margin: 1.5rem auto;
			border-radius: 2px;
			.title{
				font-size: 1.4rem;
				margin-bottom: 1rem;
			}
			#map{
				width: 96%;
				height: 20rem;
				box-shadow: 0 1px 15px 0 rgba($gray,0.9);
			}
		}
	}

	.goods-details{
		width: 100%;
		height: auto;
		margin-top: 0.5rem;
		.item{
			padding: 0.5rem 1.5%;
			width: 23rem;
			margin-left: 0;
			.img{
				#imgWall{
					margin-left: 0;
					width: 23rem;
					height: 23rem;
					overflow: hidden;
					border: 1px solid $themeColor;
				}
				#imgBox{
					white-space:nowrap;  
					position: relative;
				}
				.big-img{
					display: inline-block;
					white-space:nowrap;  
					width: 23rem;
					height: 23rem;
				}
				#small-img-box{
					margin-top: 0.5rem;
					width: 100%;
					width: 23rem;
				}
				.small-img{
					width: 50px;
					height: 50px;
					margin-right: 0.3rem;
				}
			}
			.price,.num,.money,.xto,.buy,#qrcode{
				display: inline-block;
			}
			.price{
				width: 40%;
				margin-right: 0.5rem;
				color: $red;
			}
			.money{
				width: 40%;
				margin-right: 0.5rem;
			}
			.buy{
				.buynum{
					width: 65px;
					text-align: center;
					margin-right: 0.5rem;
				}
				.add_cart{
					width: 80px;
					height: 20px;
					line-height: 20px;
					color: $fontColor;
					background-color: $themeColor;
					border: 0;
					padding: 0;
					font-size: 13px
				}
			}
		}
	}
	.comments{
		margin-left: 0;
		width: 23rem;
		padding: 0.5rem 1.5%;
		.title{
			width: 80px;
			height: 20px;
			line-height: 20px;
			border-radius: 0.3rem;
			text-align: center;
			color: $fontColor;
			background-color: $themeColor;
			margin-left: 0
		}
		table{
			width: 100%;
			.first{
				width: 10%;
				color: $red;
				padding: 0.3rem 0;
			}
			.second{
				@include newLine();
				padding: 0.3rem 0;
				width: 50%;
			}
			.third{
				width: 30%;
				padding: 0.3rem 0;
			}
		}
	}
	@include hr($themeColor);
	.evaluation{
		margin-bottom: 1.5rem;
		padding: 0.5rem 1.5%;
		width: 23rem;
		textarea{
			width: 65%;
			border-radius: 0.3rem;
			border: 1px solid $themeColor; 
		}
		button{
			margin-top: 0.5rem;
			padding: 0.3rem;
			border: 0;
			background-color: $themeColor;
			color: $fontColor;
		}

	}
	#evaluation{
		.evaluation_item{
			background: -moz-linear-gradient(top,  rgba(183,183,183,0) 0%, rgba(107,186,112,1) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,183,183,0)), color-stop(100%,rgba(107,186,112,1))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top,  rgba(183,183,183,0) 0%,rgba(107,186,112,1) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top,  rgba(183,183,183,0) 0%,rgba(107,186,112,1) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(top,  rgba(183,183,183,0) 0%,rgba(107,186,112,1) 100%); /* IE10+ */
			background: linear-gradient(to bottom,  rgba(183,183,183,0) 0%,rgba(107,186,112,1) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7b7b7', endColorstr='#6bba70',GradientType=0 ); /* IE6-9 */
			.score{
				font-size: 1.2rem;
				color: mix($themeColor,#000);
				text-indent: 1rem;
				text-shadow: 0 1px 2px $themeColor;
			}
			.evaluation {
				>div{
					padding: 0.2rem;
				}
				.time{
					font-size: 0.9rem;
				}
			}
			.goods,.buyer{
				padding-top: 0.2rem;
				font-size: 0.9rem;
				color:mix($themeColor,#000);
				text-shadow: 0 1px 2px $themeColor;
				a{
					color: $blue;
					text-shadow: 0 1px 4px  #FFF;
				}
			}
		}
	}


	.loginbox{
		@include breakLine;
		.sign_in_form,.sign_up_form{
			display: inline-block;
			vertical-align: top;
			width: 100%;
			padding-top: 1.5rem;
			margin-left: 0;
			@include comic_1(0.5,0);
			&.focus{
				margin-left: -100%;
			}
			*{
				margin: 0 auto;
			} 
			.title{
				width: 80%;
			} 
			font-size: 13px;
			form{
				width: 80%;
				table{
					width: 100%;
					td{
						padding-left: 0;
						height: 35px;
					}
				}
				& input[type="button"],& input[type="submit"]{
					background-color: $themeColor;
					color: $fontColor;
					margin-right: 5px;
					border-radius: 2px;
					padding: 0.5rem 1rem;
					border: 0;
					outline: none;
					box-shadow: 0 1px 3px 0 rgba($gray,0.6);
				} 
				input[type="text"],input[type="password"]{
					width: 80%;
					outline: none;
					height: 22px;
					line-height: 1rem;
					border: 1px solid $themeColor;
					border-radius: 0.3rem;
					padding: 1px 0.5rem;
				}
			}
		}
	}

	.cart{
		padding: 0.5rem 1.5%;
		@include hr($themeColor);
		.title{
			color: $fontColor;
			padding: 0 0.5rem;
			width: 80px;
			margin-left: 0;
			margin-bottom: 0.5rem;
			height: 20px;
			line-height: 20px;
			text-align: center;
			background-color: $themeColor;
		}
		.item{
			width: 100%;
			height: 80px;
			.imgbox,.info,.price{
				height: 100%;
				float: left;
			}
			.imgbox{
				margin-right: 5%;
				.img{
					height: 100%;
					width: 80px;
				}
			}
			.info{
				// @include newLine();
				word-break: break-word;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				line-height: 20px;
				width: 40%;
				margin-right: 1.5rem;
				.infotitle{
					color: $blue;
					margin-right: 0.5rem;
				}
				.intro{
					color: $grayLight;
				}
			}
			.price{
				height: 100%;
				.price-item{
					color: $red;
					margin-bottom: 0.5rem;
				}
				.num{
					margin-bottom: 0.5rem;
				}
				.remove{
					.btn{
						height: 20px;
						color: $fontColor;
						background-color: $themeColor;
						line-height: 20px;
						padding: 0 0.5rem;
						border: 0;
						&:hover{
							background-color: $btnHover;
						}
					}
				}
			}
		}
		.box{
			margin-top: 1rem;
			height: 3rem;
			padding: 0.5rem;
			line-height: 3rem;
			@include BgTransparent($btnHover,0.15,15);
			.price,.settlement{
				display: inline-block;
			}
			.price{
				color: $red;
				margin-right: 1rem;
			}
			.settlement{
				.btn{
					height: 20px;
					color: $fontColor;
					background-color: $themeColor;
					border: 0;
					padding: 0 0.5rem;
					line-height: 20px;
				}
			}
		}
	}


	.adminlogin{
		width: 100%;
		padding-top: 5.5rem;
		.loginbox{
			margin: 0 auto;
			width: 228px;
			height: 325px;
			background-image: url('../images/register_bg.png');
			.box{
				width: 160px;
				height: 100px;
				padding-top: 109px;
				padding-right: 20px;
				input{
					color: $silver;
					display: block;
					font-size: 12px;
					width: 150px;
					height: 20px;
					border: 0;
				}
				.password{
					margin-top: 43px;
				}
			}
			.btn{
				top: 125px;
				padding-left: 112px;
				width: 100px;
				height: 55px;
				input{
					display: block;
					width: 100px;height: 35px;
					border: 0;
				}
			}
		}
	}

	.alipayform{
		display: none;
		&.focus{
			display: block;
		}
	}
	.pays{
		padding: 0 1.5%;
		margin-bottom: 1.5rem;
	}
	.ftitle{
		font-size: 22px;
	}
	.order_detail{
		box-shadow: 0 1px 8px #999;
		margin-top: 10px;
		width: 100%;
		overflow: hidden;
		.title{
			font-size: 20px;
			color: $black;
			padding: 0.8rem 0.3rem;
			background-color: $grayLighter;
		}
		.item{
			border-bottom: 1px solid #ccc;
			width: 100%;
			.alipayform{
				form{
					display: inline-block;
					margin: 0.5rem 0.8rem;
				}
			}
			.title{
				background-color: $white;
				font-size: 17px;
			}
			.info{
				min-height: 45px;
				height: auto;
				color: $gray;
				padding: 0.1rem 0.3rem;
				margin-bottom: 10px;
				p{
					padding: 0.2rem 0.3rem;
				}
				.uaddr{
					background-color: #fafafa;
					box-shadow: 0 1px 4px #999;
					border-radius: 2px;
					@include newLine;
					padding: 8px 5px;
				}
				.addr{
					margin: 15px 0;
					@include newLine;
					input{
						width: 11px;
						height: 11px;
						margin-right: 5px;
						line-height: 1rem;
					}
				}
				.add_address{
					padding: 0.5rem 0.3rem;
					box-shadow: 0 1px 4px #aaa;
					background-color: $grayLighter;
					.text{
						.addr{
							select{
								margin-right: 15px;
								&.county{
									margin-right: 0;
								}
							}
						}
						.detailed_addre{
							margin-right: 15px;
							line-height: 1rem;
							padding: 0;
						}
						.connect{
							margin-top: 10px;
							input{
								line-height: 1rem;
								width: 35%;
								padding: 0;
								margin-right: 0.5rem;
								&.phone_num{
									margin-right: 0;
									width: 20%;
								}
							}
						}
					}
					.btn{
						margin-right: 0;
						margin-top: 0.5rem;
						background-color: transparent;
						.add_btn{
							padding: 0.5rem 0.8rem;
							background-color: $themeColor;
							border: 0;
							font-size: 13px;
							font-weight: normal;
							color: $fontColor;
							&:hover{
								background-color: $btnHover;
							}
						}
					}
				}
				.pay-type-wrap{
					width: 100%;
					.pay-type{
						display: inline-block;
					}
				}
				table{
					clear: both;
					margin: 0 auto;
					width: 100%;
					thead{
						background-color: $grayLighter;
						text-align: center;
						// .goods{
						// 	width: 6rem;
						// }
						// & .discount,& .price, &.count{
						// 	width: 20%;
						// }
					}
					td{
						text-align: center;
						padding: 2px 3px;
						
					}
					a{
						color: $lightBlue;
					}
				}
				.money{
					margin-top: 0.5rem;
					height: 51px;
					.money-item{
						height: 17px;
						clear: both;
						margin: 0 5px;
						.left {
							width: 75px;
							float: left;
							text-align: right;
						}
						.right {
							width: 75px;
							margin-left: 0.5rem;
							float: left;
							text-align: right;
						}
					}
				}
				.btn{
					font-size: 15px;
					margin-top: 15px;
					background-color: $themeColor;
					color: $fontColor;
					cursor: pointer;
					border: 1px solid $grayLighter;
					&:disabled,&[disabled]{
						border: 1px solid $grayLighter;
						background-color: $lightWhite;
						color: $grayLight;
						cursor: text;
					}
				}
			}
			.method{
				width: 70% !important;
				padding: 0.5rem 1% !important;
				margin: 0 auto !important;
				input{
					width: 6rem;
				}
				button{
					border: 0;
					padding: 0.5rem 0.8rem;
					margin: 5px;
					color: $fontColor;
					background-color: $themeColor;
					&:hover{
						background-color: $btnHover;
					}
				}
			}
		}
	}





	.help{
		width: 96%;
		padding: 0 2%;
		margin-bottom: 3rem;
		margin-top: 1rem;
		.title{
			color: #f60;
			font-size: 18px;
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 0.3rem;
			margin-bottom: 0.3rem;
		}
		.helpimg{
			width: 100%;
		}
		p{
			text-indent:2em;
			line-height: 18px;
			@include newLine();
			margin-bottom: 1rem;
		}
		table{
			width: 100%;
			text-align: center;
			border-collapse: collapse;
			box-shadow: 0 1px 8px #999;
			border-radius: 2px;
			overflow: hidden;
			margin-top: 1.5rem;
			thead{
				td{
					background-color: #f0f0f0;	
					padding: 0.5rem;
				}
			}
			td{
				padding: 0.3rem;
			}
		}
	}


	.block{
		height: 3rem;
	}
	.bottom{
		margin-top: 3.5rem;
		margin-bottom: 1.5rem;
		padding: 0.5rem 1.5%;
		text-align: center;
		color: $grayLight;
		a{
			color: $grayLight;
		}
	}


	.warp{
		width: 47%;
		margin: 0.3rem 1.5%;
		border-radius: 2px;
		box-shadow: 0 1px 6px 0 rgba($gray,0.6);
		display: inline-block;
		overflow: hidden;
		text-align: center;
		background-color: $white;
		.tobuy{
			color: $fontColor;
		}
		.info{
			padding: 0 3%;
			background-color: $themeColor; 
			line-height: 2rem;
			.head,.price{
				text-align: left;
				@include Line(1);
			}
		}
		.preview_img{
			width: 92%;
			padding: 0.5rem 4%;
			.img{
				width: 100%;
			}
		}
	}
//}

